<script setup>
import HomeCategory from './components/HomeCategory.vue'
import HomeBanner from './components/HomeBanner.vue'
import {ref} from 'vue'
import HomeNew from './components/HomeNew.vue'
import HomeHot from './components/HomeHot.vue'
import homeProduct from './components/HomeProduct.vue'
const torf = ref(1)
const  handleMouseOver = (()=>{
  torf.value = 2
})
const  handleMouseleave = (()=>{
  torf.value = 1
})
</script>

<template>
  <div class="container">
    <HomeCategory class="category" @mouseenter="handleMouseOver" @mouseleave="handleMouseleave"/>
    <HomeBanner class="banner" :class="{bannerss : torf==2}"/>
  </div>
  <HomeNew />
  <HomeHot />
  <homeProduct />
 
 
</template>

<style lang="scss" scoped>

 .bannerss{
  display: none;
 }
</style>